<template>
  <div class="home">
    <el-container>
      <el-aside>
        <!-- <div class="leftTitle"><i class="el-icon-menu"></i>&nbsp; 共享单车管理系统</div> -->
        <div :class="isCollapse ? 'leftTitle2': 'leftTitle'"><i class="el-icon-menu"></i>&nbsp;<span
            v-if="!isCollapse">共享单车管理系统</span> </div>
        <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
          @select="selects" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
          :collapse="isCollapse">
          <el-menu-item index="1">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-tickets"></i>
            <span slot="title">用户信息管理</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-document"></i>
            <span slot="title">用户租借管理</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-star-off"></i>
            <span slot="title">会员开户管理</span>
          </el-menu-item>
          <el-menu-item index="5">
            <i class="el-icon-bicycle"></i>
            <span slot="title">共享单车管理</span>
          </el-menu-item>
          <el-menu-item index="6" @click="bigScreen">
            <i class="el-icon-s-marketing"></i>
            <span slot="title">大屏数据统计</span>
          </el-menu-item>
          <el-menu-item index="7">
            <i class="el-icon-user-solid"></i>
            <span slot="title">个人中心</span>
          </el-menu-item>
        </el-menu>

      </el-aside>

      <el-container>
        <el-header>
          <div @click="shrinkMenu" class="shrink">
            <i :class="isCollapse ? 'el-icon-s-unfold': 'el-icon-s-fold'"></i>
          </div>
          <div class="topUser">
            <el-tooltip class="item" effect="dark" content="退出登录" placement="bottom">
              <div @click="logout" style="cursor: pointer;">
                <img v-if="photo" :src="photo" alt="">
                <img v-if="!photo" :src="imageUrl" alt="">
                &nbsp;
                <div style="display: inline-block;text-align: center;"> admin</div>
              </div>

            </el-tooltip>
          </div>
        </el-header>
        <el-main>
          <homes v-if="keys == 1"></homes>
          <userInformation v-if="keys == 2"></userInformation>
          <userRental v-if="keys == 3"></userRental>
          <userMember v-if="keys == 4"></userMember>
          <shareBicycle v-if="keys == 5"></shareBicycle>
          <personalCenter v-if="keys == 7"></personalCenter>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import userInformation from '@/views/mains/userInformation.vue'
  import userRental from '@/views/mains/userRental.vue'
  import personalCenter from '@/views/mains/personalCenter.vue'
  import userMember from '@/views/mains/userMember.vue'
  import shareBicycle from '@/views/mains/shareBicycle.vue'
  import homes from '@/views/mains/homes.vue'

  export default {
    computed: {
      ...mapGetters(['photo'])
    },
    components: { personalCenter, userRental, userInformation, homes, shareBicycle, userMember },
    data() {
      return {
        imageUrl: require('../assets/ren.jpg'),
        keys: 1,
        isCollapse: false
      }
    },
    created() {
    },
    methods: {
      logout() {
        // 询问用户是否退出登录
        this.$confirm('您确认退出登录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            // TODO：执行退出登录的操作
            // 1. 清空 token
            this.$store.commit('updateToken', '')
            this.$store.commit('updateUserInfo', {})
            // 2. 跳转到登录页面
            this.$router.push('/login')
          })
          .catch((err) => err)
      },
      bigScreen() {
        this.$router.push({ path: '/screenData' })
      },
      shrinkMenu() {
        this.isCollapse = !this.isCollapse;
      },
      selects(key, keyPath) {
        this.keys = key
      },
      handleOpen(key, keyPath) {
      },
      handleClose(key, keyPath) {
      }
    }
  }
</script>
<style scoped>
  /deep/ .el-icon-s-fold,
  .el-icon-s-unfold {
    font-size: 30px;
    color: #fff;
  }

  .el-menu-vertical:not(.el-menu--collapse) {
    width: 200px;
  }

  .shrink {
    padding: 0.9% 0 0 0;
    position: absolute;
    display: inline-block;
    float: left;
    background: rgb(88, 178, 178);
    cursor: pointer;
  }

  .topUser>div {
    color: white;
    width: 7%;
    height: 100%;
    display: flex;
    /* justify-content: center; */
    align-items: center;
  }

  .topUser>div>img {
    display: inline-block;
    height: 40px;
    width: 40px;
    border-radius: 30px;
    border: 1px solid rgb(88, 178, 178);
  }

  .topUser {
    color: white;
    width: 8%;
    height: 100%;
    float: right;
    /* display: flex;
    justify-content: center;
    align-items: center; */
  }


  .el-container {
    height: 100%;
  }

  .home {
    position: absolute;
    height: 100%;
    width: 100%;
  }

  .el-header {
    background-color: rgb(88, 178, 178);
    color: #333;
    height: 7.1% !important;
    padding: 0 10px !important;
  }

  .el-aside {
    width: auto !important;
    background-color: #545c64;
    font-size: 14px;
    height: 100%;
    position: relative;
  }

  .leftTitle {
    height: 7% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(75, 154, 154);
    color: white;
  }

  .leftTitle2 {
    overflow: hidden !important;
    height: 7% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    background-color: rgb(75, 154, 154);
    color: white;

  }

  .el-main {
    background-color: #E9EEF3;
    height: 100%;
    padding: 0 !important;
    flex: 1;
    box-sizing: border-box;
  }
</style>